Webstorm配置Sass,Scss | 您所在的位置:网站首页 › sass scss and less webstorm documentation › Webstorm配置Sass,Scss |
1. 前提条件: 电脑已经完成Ruby,Sass,Compass的安装 。 2.配置 打开webstorm ---- settings ---- Tools ---- files Watchers ---- 点击加号,选择scss / sass 然后按照下图进行操作: 1、Program : Ruby安装目录下 ---- bin ---- scss.bat / sass.bat文件路径 2、Argument : 可以配置编译后的文件的输出路径。 相关配置(举例两种): 1. --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css 举个例子,比如说我有一个test项目,test项目下有一个scss/sass文件,按照这样配置的结果就是,编译后的css文件就在scss/sass文件下 2. --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css 举个例子,比如说我有一个test项目,test项目下有一个scss/sass文件夹,该文件夹下存放的就是scss/sass文件。那么按照这样配置的结果就是,scss/sass文件所在的文件夹就是scss/sass,scss/sass文件夹的父级文件夹就是test,然后找到test项目里面的css文件夹,编译后的css文件就存放在此目录下 注意:$FileName$后面有个冒号。 $FileParentDir$ 表示scss/sass文件所在的文件夹的父级文件夹,而不是scss/sass的父文件夹
3、Output paths to refresh: 相关配置:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 经过以上的配置就可以实现实时编译了 注意点: 1. 同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目,随便打开一个项目外的文件是不行的 2. Sass/Scss编译不能带有中文,无论是路径名,文件名,还是文件里的内容,都无法识别中文。如果要修改文件名也不是不可以的,建议文件名尽量使用英文。 3.webstorm中Scss/Sass编译时目录或内容包含中文字符报错。 1、 解决目录带带中文问题 Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 打开 --trace 出现如下提示信息:filesystem.rb:87:index
添加encode("utf-8","gbk") 2、如果Scss/Sass文件中内容带中文会报错,就给Scss/Sass文件的第一行添加@charset "utf-8" 4.编译风格的设置 提供了四种编译风格: nested : 嵌套缩进的CSS代码,为默认值。 expanded : 没有缩进、扩展的CSS代码。 compact : 简洁格式的CSS代码。 compressed : 压缩后的CSS代码。 更换编译风格: 在Arguments配置的末尾添加 --style 编译风格 如: --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css --trace --style compressed 将编译风格设置完毕后,要使用哪种就勾选哪种
|
CopyRight 2018-2019 实验室设备网 版权所有 |